<template>
    <div class="transaction-detail-wrapper">
        <el-row style="width: 100%" :gutter="20">
            <el-col :span="16">
                <el-card class="mt-4 !border-none" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span>订单详情</span>
                        </div>
                    </template>
                    <div class="itemContent">
                        <el-space>
                            <div class="w-120 label-title">订单编号：</div>
                            <div>
                                <span>{{ detail.orderSn }}</span>
                            </div>
                        </el-space>
                        <el-space>
                            <div class="w-120 label-title">收货信息：</div>
                            <div>
                                <span>{{ getWholeAddress() }}</span>
                            </div>
                        </el-space>
                      <el-space>
                        <div class="w-120 label-title">订单类型：</div>
                        <div>
                          <span>{{ detail.orderType == 1 ?`现金订单`:`积分订单` }}</span>
                        </div>
                      </el-space>
                        <el-space>
                            <div class="w-120 label-title">创建时间：</div>
                            <div>
                                <span>{{ detail.createTime }}</span>
                            </div>
                        </el-space>
                        <el-space>
                            <div class="w-120 label-title">支付时间：</div>
                            <div>
                                <span>{{ detail.payTime || "--" }}</span>
                            </div>
                        </el-space>
                        <el-space>
                          <div class="w-120 label-title">支付方式：</div>
                          <div>
                            <span>{{ detail.orderType == 1 ?`微信支付`:`积分支付` }}</span>
                          </div>
                        </el-space>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="mt-4 !border-none" shadow="never">
                    <template #header>
                        <div class="card-header">
                            <span>订单状态: {{ statusMap[detail.status] }}</span>
                        </div>
                    </template>
                    <div class="itemContent">
                        <el-space>
                            <div class="w-120 label-title">总金额：</div>
                            <div>
                                <span>{{ detail.payAmount }}</span>
                            </div>
                        </el-space>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-card style="margin-top: 20px" class="mt-4 !border-none" shadow="never">
            <template #header>
                <div class="card-header">
                    <span>商品信息</span>
                </div>
            </template>
            <el-table size="large" :data="detail.orderItemList || []">
                <el-table-column label="产品名称" prop="goodsName" min-width="180" />
                <el-table-column label="规格" prop="specName" min-width="100"></el-table-column>
                <el-table-column label="单价" prop="salePrice" min-width="100"></el-table-column>
                <el-table-column label="数量" prop="quantity" min-width="100"></el-table-column>
            </el-table>
        </el-card>
        <el-card style="margin-top: 20px" class="mt-4 !border-none" shadow="never" v-if="detail.status !== 1 && detail.status !== 2 && detail.status !== 5 && detail.status !== 6 && detail.status !== 7">
            <template #header>
                <div class="card-header">
                    <span>发货单</span>
                </div>
            </template>
            <el-table size="large" :data="detail.orderItemList || []">
                <el-table-column label="物流单号" min-width="100" prop="deliverySn"></el-table-column>
                <el-table-column label="物流名称" min-width="100" prop="deliveryName"></el-table-column>
                <el-table-column label="发货时间" min-width="100" prop="deliveryTime"></el-table-column>
            </el-table>
        </el-card>
        <el-card style="margin-top: 20px" class="mt-4 !border-none" shadow="never" v-if="detail?.afterSalesVo">
            <template #header>
                <div class="card-header">
                    <span>售后记录</span>
                </div>
            </template>
            <el-table size="large" :data="detail.afterSalesVo">
                <el-table-column label="售后ID" prop="id" min-width="180" />
                <el-table-column label="售后状态" min-width="100">
                    <template #default="{ row }">
                        <span>{{ afterSaleStatusMap[row.status]?.label }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="售后金额" min-width="100" prop="amount"></el-table-column>
                <el-table-column
                    label="申请时间"
                    min-width="100"
                    prop="createTime"
                ></el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link>
                            <router-link :to="`/afterSales/detail?id=${row.id}`">
                                查看详情
                            </router-link>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="transactionDetail">
import { articleLists } from '@/api/article'
import { usePaging } from '@/hooks/usePaging'
import { orderDetail } from '@/servers/order/api/supplyChaindingdanguanli'

const route = useRoute()

function getWholeAddress() {
    if (!detail.value) return '_'
    const { receiverProvince, receiverCity, receiveRegion, receiveAddress } = detail.value
    return [receiverProvince, receiverCity, receiveRegion, receiveAddress].filter(Boolean).join('')
}

const statusMap: any = {
    1: '待付款',
    2: '待发货',
    3: '已发货',
    4: '已完成',
    5: '取消',
    6: '已关闭'
}

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: articleLists,
    params: {}
})

const afterSaleStatusMap: any = {
    1: {
        label: '待审核',
        icon: ''
    },
    2: {
        label: '平台已审核',
        icon: ''
    },
    3: {
        label: '等待用户发货/退款',
        icon: ''
    },
    4: {
        label: '用户已发货',
        icon: ''
    },
    5: {
        label: '退款成功',
        icon: ''
    }
}

const detail: any = ref({})
const getDetail = async () => {
    const res = await orderDetail({
        orderId: route.query.id as any
    })
    detail.value = res
}

getDetail()
</script>
<style lang="scss" scoped>
.transaction-detail-wrapper {
    width: 100%;
    .itemContent {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        ::v-deep .el-space {
            margin-bottom: 10px;
        }
    }
}
</style>
